import React from 'react';
import { IContext } from 'beta/typings/context';

import StepWrapper from 'beta/containers/layout/StepWrapper';

import LinkPaymentMethods from './containers/LinkPaymentMethods';
import { Box, Text } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { usePaymentMethodQuery } from 'typings/graphql';

type TengjaProps = {
  customerId: string;
  paymentMethodId: string;
};

const Tengja = ({ customerId, paymentMethodId }: TengjaProps) => {
  const router = useRouter();
  const { data, error, loading } = usePaymentMethodQuery({
    variables: {
      input: {
        id: router?.query?.paymentMethodId?.toString() ?? '',
      },
    },
  });

  const COLOR = 'pink';
  const paymentMethod =
    data?.paymentMethod?.__typename === 'CreditCardPaymentMethod' ? data.paymentMethod : undefined;

  if (error)
    return (
      <Box padding={30}>
        <Text>Something went wrong!</Text>
      </Box>
    );
  if (!data || loading)
    return (
      <Box padding={30}>
        <Text>Loading.....</Text>
      </Box>
    );

  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/greidslumati/${paymentMethodId}`}
      title="Tengja Þjónustu"
      subTitle={paymentMethod?.maskedNumber ? paymentMethod?.maskedNumber.slice(-8) : ''}
      icon="wallet"
      childrenBottom={
        <Box>
          <Text variant="pSmallRegular" color="grey500" renderAs="span">
            Upplýsingar og
          </Text>
          <Text variant="pSmallBold" color={COLOR} renderAs="span">
            <a href="https://www.nova.is/nova-tv/spurningar" target="__blank">
              {''} spurningar
            </a>
          </Text>
        </Box>
      }
    >
      <LinkPaymentMethods />
    </StepWrapper>
  );
};

Tengja.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    paymentMethodId: query.paymentMethodId,
    namespacesRequired: [],
  };
};

export default inject('steps')(observer(Tengja));